<template>
  <div class="backColor" @click="signin">
    <div class="backColor_div" @click.stop="stop">
      <p class="title">微信登录</p>
      <div class="erweima">
        <canvas id="QRCode"></canvas>
        <div class="time" v-show="time">
          <p class="time_p">二维码已过期</p>
          <div class="time_button" @click="getScanCode">点击刷新</div>
        </div>
        <div class="ok" v-show="!ok">
          <img src="../assets/image/success.png" />
        </div>
      </div>
      <div class="alert" v-if="ok">
        <p>请使用微信扫描二维码登录</p>
        <p>"文旅绿码后台管理系统"</p>
      </div>
      <div class="alert" v-else>
        <p>微信授权登录成功</p>
        <p>即将跳转</p>
      </div>
    </div>
    <i class="el-icon-close icon"></i>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  data() {
    return {
      websocket: null,
      time: false,
      setTime: null,
      clientId: "",
      ok: true
    };
  },
  created() {
    this.getScanCode();
  },
  beforeDestroy() {
    clearInterval(this.setTime);
  },
  destroyed() {
    this.websocketclose();
  },
  methods: {
    timeCheck(data) {
      let that = this;
      this.setTime = setInterval(function() {
        data++;
        if (data == 600) {
          that.time = true;
          that.websocket.close();
          clearInterval(that.setTime);
        }
      }, 1000);
    },
    getScanCode() {
      this.$http("/stage/user/getScanCode", {}, "get", res => {
        if (res.data.code == 200) {
          var msg = document.getElementById("QRCode");
          QRCode.toCanvas(msg, res.data.data, function(error) {});
          this.clientId = res.data.data.split("clientId=")[1];
          this.initWebSocket();
          this.time = false;
          clearInterval(this.setTime);
          this.timeCheck(0);
        } else {
          this.$Message.error("获取二维码失败");
        }
      });
    },
    signin() {
      this.$router.push({ name: "signin" });
    },
    stop(e) {
      e.stopPropagation();
    },
    initWebSocket() {
      const WS_URL =
        "wss://" +
        process.env.API_ROOT.split("//")[1] +
        "/websocket/" +
        this.clientId;
      this.websocket = new WebSocket(WS_URL);
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onclose = this.websocketclose;
    },
    /// 连接建立之后执行send方法发送数据
    websocketonopen() {
      this.websocket.send("测试");
    },
    // //连接建立失败重连
    websocketonerror(e) {
      this.initWebSocket();
    },
    // 数据接受
    websocketonmessage(e) {
      if (e.data != "建立连接") {
        let data = JSON.parse(e.data);
        this.websocket.close();
        clearInterval(this.setTime);
        this.ok = false;
        this.$Message.success("欢迎登录，即将跳转");
        localStorage.clear();
        this.$store.state.superAdmin = data.superAdmin;
        this.$store.state.token = data.token;
        localStorage.setItem("token", data.token);
        localStorage.setItem("superAdmin", data.superAdmin);
        let that = this;
        if (data.superAdmin) {
          this.$store.state.museumId = "";
          localStorage.setItem("museumId", "");
          this.$store.state.museums = [];
          localStorage.setItem("museums", JSON.stringify([]));
          setTimeout(function() {
            that.$router.push({ name: "博物馆管理" });
          }, 1000);
        } else {
          this.$store.state.museums = data.museums;
          localStorage.setItem("museums", JSON.stringify(data.museums));
          this.$store.state.museumId = data.museums[0].id;
          localStorage.setItem("museumId", data.museums[0].id);
          this.$store.state.museumName = data.museums[0].name;
          localStorage.setItem("museumName", data.museums[0].name);
          setTimeout(function() {
            that.$router.push({ name: "博物馆信息" });
          }, 1000);
        }
      }
    },
    // 关闭
    websocketclose(e) {
      this.websocket.close();
    }
  }
};
</script>

<style scoped>
.backColor {
  background-color: #30323a;
  position: absolute;
  width: 100%;
  height: 100%;
}
.backColor_div {
  width: 280px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -140px;
}
.title {
  font-size: 20px;
  color: white;
  text-align: center;
  margin-top: 150px;
}
.erweima {
  width: 280px;
  height: 280px;
  background-color: white;
  margin-top: 20px;
  position: relative;
}
.erweima img {
  width: 100%;
  height: 100%;
}
.time {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
}
.time_p {
  width: 100%;
  text-align: center;
  font-size: 20px;
  margin-top: 100px;
  color: black;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.time_button {
  width: 150px;
  height: 45px;
  background-color: #5dd5c8;
  text-align: center;
  line-height: 45px;
  color: white;
  font-size: 16px;
  border: 1px #5dd5c8 solid;
  margin: 20px 0 0 65px;
  cursor: pointer;
}
.time_button:hover {
  background-color: #36c8b8;
}
.icon {
  position: absolute;
  color: white;
  right: 20px;
  top: 20px;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.3s;
}
.icon:hover {
  transform: rotate(180deg);
}
.alert {
  width: 280px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 30px;
  border-radius: 50px;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  line-height: 20px;
  padding-top: 5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}
#QRCode {
  width: 280px !important;
  height: 280px !important;
}
.ok {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 95px;
  left: 95px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 10px black;
}
.ok img {
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
</style>